<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>{$adata['actname']}</title>
	<script src="{:ADDON_PUBLIC_PATH}/js/echarts.js"></script>
	<style>
		body{
			

		}
		.left-div{
			float:left;
			width:20%;
		}
		.right-div{
			float:right;
			width:80%;
		}
	</style>
</head>
<body>
 <!--活动完成情况-->
 <div id="main" style="margin:0 auto;width:600px;height:400px;"></div>
 <script>
          // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
option = {
    title : {
        text: '活动完成情况',
        subtext: '2017-7-7',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['已完成','未完成']
    },
    series : [
        {
            name: '活动完成情况',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:{$arr[1]['confirm']}, name:'已完成'},
                {value:{$arr[0]['confirm']}, name:'未完成'},
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 </script>
 <!--活动完成情况-->
 <!--各班完成情况-->
 <div id="ban" style="margin:0 auto;width:1000px;height:700px;"></div>
  <script>
          // 基于准备好的dom，初始化echarts实例
var ban = echarts.init(document.getElementById('ban'));
dataAxis = [<volist name="classData" id="val">"{$key}",</volist>];
        // 指定图表的配置项和数据
option = {
    title : {
        text: '各班完成情况',
        subtext: '2017-7-7',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    xAxis: {
        data: dataAxis,
        axisLabel: {
            show: false
            // inside: true,
            // textStyle: {
            //     color: '#fff'
            // }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        data: ['已完成','未完成']
    },
    series: [
          {
            name: '已完成',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [<volist name="classData" id="val"><if condition="$val[1]">{$val[1]}<else/>0</if>,</volist>]
        },
        {
            name: '未完成',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [<volist name="classData" id="val"><if condition="$val[0]">{$val[0]}<else/>0</if>,</volist>]
        },
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        // Enable data zoom when user click bar.
        var zoomSize = 6;
        ban.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            ban.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });
        ban.setOption(option);
 </script>
 <!--各班完成情况-->
</body>
</html>